<template>
  <div>
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column
        v-loading="loading"
        align="center"
        width="80px"
        label="序号"
        element-loading-text="加载中"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="140px" label="开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="140px" label="结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.endTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200px" label="通知标题">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="110px" label="通知内容">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="small"
            @click="content(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160px" label="发送人">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="auto" min-width="160px" label="操作">
        <template slot-scope="scope">
          <el-button
            :disabled="Date.now() > new Date(scope.row.endTime).getTime()"
            type="primary"
            plain
            size="small"
            @click="edit(scope.row)"
          >编辑
          </el-button>
          <el-button type="danger" plain size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>20" :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="() => { this.$reload() }" />
  </div>
</template>

<script>
import Pagination from '../../../components/Pagination'
import { deleteNotify } from '../../../api/notify'
export default {
  name: 'NotifyTable',
  components: { Pagination },
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: null
    },
    query: {
      type: Object,
      default: function() {
        return {
          page: 1,
          limit: 20,
          title: null,
          sort: '+id'
        }
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    del(item) {
      this.$confirm('删除后用户无法收到该通知, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteNotify({ id: item.id }).then(() => {
          this.$SUCCESS('删除通知成功')
          this.$reload()
        }).catch(() => {
          this.$ERROR('删除通知失败')
        })
      }).catch(() => {})
    },
    edit(item) {
      this.$emit('edit', item)
    },
    content(item) {
      this.$alert(item.content, item.title, {
        confirmButtonText: '确定'
      })
    }
  }
}
</script>

<style scoped>

</style>
